    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>致拉扎提的情书</title>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap');
            
            /* 确认对话框样式 */
            .confirmation-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                z-index: 9999;
                display: flex;
                justify-content: center;
                align-items: center;
                backdrop-filter: blur(5px);
            }

            .dialog-box {
                background: white;
                padding: 30px;
                border-radius: 15px;
                text-align: center;
                box-shadow: 0 0 20px rgba(255,255,255,0.2);
                max-width: 80%;
            }

            .dialog-buttons {
                margin-top: 20px;
                display: flex;
                gap: 15px;
                justify-content: center;
            }

            .dialog-button {
                padding: 12px 30px;
                border: none;
                border-radius: 25px;
                font-size: 16px;
                cursor: pointer;
                transition: all 0.3s;
            }

            #confirmYes {
                background: #ff6699;
                color: white;
            }

            #confirmNo {
                background: #e0e0e0;
                color: #666;
            }

            /* 信封动画样式 */
            .envelope-container,
            .container {
                display: none;
            }

            .envelope-container {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                perspective: 1000px;
                z-index: 2;
            }

            .envelope {
                width: 200px;
                height: 120px;
                background: #fff0f5;
                position: relative;
                transition: all 1.5s ease-in-out;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                transform-style: preserve-3d;
            }

            .envelope::before {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                border-top: 60px solid #ff99b6;
                bottom: 100%;
                left: 0;
            }

            .envelope::after {
                content: '✉️';
                position: absolute;
                font-size: 30px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 0.8;
            }

            .open-animation {
                transform: rotateX(180deg) translateY(-100px);
                opacity: 0;
            }

            /* 主体样式 */
            body {
                margin: 0;
                padding: 20px;
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                min-height: 100vh;
                overflow-x: hidden;
            }

            .container {
                max-width: 600px;
                margin: 0 auto;
                background: rgba(255, 255, 255, 0.95);
                padding: 30px;
                border-radius: 12px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                backdrop-filter: blur(8px);
                opacity: 0;
                transform: translateY(50px);
                transition: all 1s ease-in-out 1.2s;
            }

            .show-content {
                opacity: 1;
                transform: translateY(0);
            }

            /* 文字样式 */
            .letter-content {
                font-family: 'ZCOOL XiaoWei', serif;
                font-size: 16px;
                line-height: 1.8;
                color: #4a4a4a;
                opacity: 0;
                transition: opacity 0.5s ease-in 1.7s;
            }

            .custom-name {
                color: #c06c84;
                font-family: 'Ma Shan Zheng', cursive;
                font-size: 1.2em;
                text-shadow: 1px 1px 2px rgba(192,108,132,0.2);
            }

            .highlight {
                color: #e74c3c;
                font-weight: bold;
                animation: pulse 2s infinite;
            }

            h1 {
                text-align: center;
                color: #6c5b7b;
                font-family: 'Ma Shan Zheng', cursive;
                margin-bottom: 30px;
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.5s ease-in 1.7s;
            }

            .seal {
                width: 80px;
                opacity: 0.8;
                margin: 20px auto;
                display: block;
            }

            /* 动画效果 */
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }

            .show-content h1,
            .show-content .letter-content {
                opacity: 1;
                transform: translateY(0);
            }
        </style>
    </head>
    <body>
        <!-- 确认对话框 -->
        <div class="confirmation-modal" id="confirmationModal">
            <div class="dialog-box">
                <h3 style="color:#ff6699; margin-bottom:15px;">❤️ 来自爱你的人 ❤️</h3>
                <p style="font-size:18px; margin-bottom:25px;">你愿意拆开这封信吗？</p>
                <div class="dialog-buttons">
                    <button class="dialog-button" id="confirmYes">是的！</button>
                    <button class="dialog-button" id="confirmNo">不要</button>
                </div>
            </div>
        </div>

        <!-- 信封容器 -->
        <div class="envelope-container">
            <div class="envelope" id="envelope"></div>
        </div>

        <!-- 主内容容器 -->
        <div class="container" id="mainContent">
            <h1>❀ 致 拉扎提 的情书 ❀</h1>
            <div class="letter-content">
                <p>亲爱的<span class="custom-name">拉扎提</span>：</p>
                <p>当我第一在网上见到你时，我的心就像被什么东西轻轻撞了一下。</p>
                <p>你的笑容像春天的阳光，温暖了我的心房；你的眼睛像夜空的星星，照亮了我的世界。<span class="custom-name">拉扎提</span>这个名字，从此成为我心中最温柔的诗行。</p>
                <p>每次和你聊天，时间总是过得特别快，我多么希望那一刻能永远停留。</p>
                <p>我喜欢你认真时的样子，喜欢你笑起来的模样，喜欢你的一切。</p>
                <p>你知道吗？每当想起你，我的嘴角就会不自觉地上扬。</p>
                <p>我想告诉你，<span class="highlight">我喜欢你</span>，不只是因为你的美丽，更因为和你在一起时，我感受到了前所未有的幸福。</p>
                <p>如果可以，我想牵着你的手，走过四季，看遍世间美好。</p>
                <p>这封信笺太短，装不下所有心事。余下的故事，可否邀你共写余生？</p>
                <img src="" 
                     class="seal" 
                     alt="心形印章">
            </div>
        </div>

        <script>
            window.addEventListener('load', function() {
                const modal = document.getElementById('confirmationModal');
                const btnYes = document.getElementById('confirmYes');
                const btnNo = document.getElementById('confirmNo');
                const envelope = document.getElementById('envelope');
                const content = document.getElementById('mainContent');

                // 初始化显示确认对话框
                modal.style.display = 'flex';

                // 确认按钮点击处理
                btnYes.onclick = function() {
                    modal.style.display = 'none';
                    document.querySelector('.envelope-container').style.display = 'block';
                    document.querySelector('.container').style.display = 'block';

                    // 启动信封动画和内容显示
                    setTimeout(() => {
                        envelope.classList.add('open-animation');
                        setTimeout(() => {
                            content.classList.add('show-content');
                        }, 1500);
                    }, 500);
                };

                // 拒绝按钮抖动效果
                btnNo.onclick = function() {
                    this.style.transform = 'translateX(10px)';
                    setTimeout(() => this.style.transform = 'translateX(0)', 100);
                    setTimeout(() => this.style.transform = 'translateX(-10px)', 200);
                    setTimeout(() => this.style.transform = 'translateX(0)', 300);
                };
            });
        </script>
    </body>
    </html>
    